<template>
  <div class="breadcrumb-collapsed">
    <span 
      @click="$emit('navigate', currentPath[0])"
      class="breadcrumb-item"
    >
      <el-icon class="breadcrumb-icon">
        <FolderOpened />
      </el-icon>
      {{ currentPath[0].label }}
    </span>
    
    <span class="separator">
      <el-icon><ArrowRight /></el-icon>
    </span>
    
    <el-tooltip 
      effect="dark"
      :content="middlePathContent"
      placement="top"
    >
      <span class="breadcrumb-ellipsis">
        <el-icon><MoreFilled /></el-icon>
      </span>
    </el-tooltip>
    
    <span class="separator">
      <el-icon><ArrowRight /></el-icon>
    </span>
    
    <span 
      @click="$emit('navigate', currentPath[currentPath.length - 1])"
      class="breadcrumb-item"
    >
      <el-icon class="breadcrumb-icon">
        <Document 
          v-if="currentPath[currentPath.length - 1].type === 'document'"
        />
        <FolderOpened v-else />
      </el-icon>
      {{ currentPath[currentPath.length - 1].label }}
    </span>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import {
  FolderOpened,
  Document,
  ArrowRight,
  MoreFilled
} from '@element-plus/icons-vue'

const props = defineProps({
  path: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(['navigate'])

const currentPath = computed(() => props.path)

const middlePathContent = computed(() => {
  return props.path
    .slice(1, -1)
    .map(item => item.label)
    .join(' / ')
})
</script>

<style scoped>
.breadcrumb-collapsed {
  display: flex;
  align-items: center;
}
</style>